<template>
  <q-scroll-area class="fit">
    <div class="q-pa-sm">
      <div class="row q-col-gutter-sm">
        <div
          class="col-lg-4 col-md-4 col-xs-12 col-sm-12"
          v-for="data in card_data"
          :key="data.name"
        >
          <directory-card
            class="col-lg-4 fit col-md-4 col-sm-12 col-xs-12"
            :avatar="data.avatar"
            :name="data.name"
            :des="data.des"
            :email="data.email"
          ></directory-card>
        </div>
      </div>
    </div>
  </q-scroll-area>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
import { baseImg } from './data/list';
const card_data = [
  {
    name: '余罪',
    Crated_Date: '15/3/2020',
    Project: '男一号',
    avatar: baseImg,
    progress: 80,
    des: '雄心未老',
    email: '123@qq.com',
  },
  {
    name: '林靖宇',
    Crated_Date: '15/3/2020',
    Project: '男一号',
    avatar: baseImg,
    progress: 80,
    des: '雄心未老',
    email: '123@qq.com',
  },
  {
    name: '严德标',
    Crated_Date: '15/3/2020',
    Project: '男一号',
    avatar: baseImg,
    progress: 80,
    des: '雄心未老',
    email: '123@qq.com',
  },
  {
    name: '温澜',
    Crated_Date: '15/3/2020',
    Project: '男一号',
    avatar: baseImg,
    progress: 80,
    des: '雄心未老',
    email: '123@qq.com',
  },
  {
    name: '许平秋',
    Crated_Date: '15/3/2020',
    Project: '男一号',
    avatar: baseImg,
    progress: 80,
    des: '雄心未老',
    email: '123@qq.com',
  },
  {
    name: '安佳璐',
    Crated_Date: '15/3/2020',
    Project: '男一号',
    avatar: baseImg,
    progress: 80,
    des: '雄心未老',
    email: '123@qq.com',
  },
];
const DirectoryCard = defineAsyncComponent(
  () => import('components/cards/DirectoryCard.vue')
);
</script>

<style scoped></style>
